The slider is a way to allow the user to select a value from a given numerical range. You might use it for choosing a percentage, combine two of them to get min and max values, or use three of them to specify the hex values for a color. Each slider contains a single 'thumb' that can be dragged along the slider's length to change the value. Sliders are equally useful inside forms and standalone.

Example

Ext.define('MyApp.view.MyFormPanel', {

    extend: 'Ext.form.Panel',

 

    config: {

        fullscreen: true,

        items: [

            {

                xtype: 'titlebar',

                docked: 'top',

                id: 'SliderValueToolbar',

                title: 'value=[25,75]'

            },

            {

                xtype: 'fieldset',

                title: '',

                items: [

                    {

                        xtype: 'checkboxfield',

                        id: 'OverlappingCkeckBox',

                        itemId: 'mycheckbox',

                        label: 'Allow Thumb OverLapping :',

                        checked: true

                    },

                    {

                        xtype: 'sliderfield',

                        id: 'SliderField',

                        itemId: 'mysliderfield',

                        component: {

                            allowThumbsOverlapping: true

                        },

                        label: 'Slider Field',

                        value: [

                            25,

                            75

                        ]

                    } 
                ] 
            } 
        ], 
        listeners: [ 
            { 
                fn: 'onOverlappingCkeckBoxCheck', 
                event: 'check', 
                delegate: '#OverlappingCkeckBox' 
            }, 
            { 
                fn: 'onOverlappingCkeckBoxUncheck', 
                event: 'uncheck', 
                delegate: '#OverlappingCkeckBox' 
            }, 
            { 
                fn: 'onSliderFieldChange', 
                event: 'change', 
                delegate: '#SliderField' 
            } 
        ] 
    }, 
  
    onOverlappingCkeckBoxCheck: function(checkboxfield, e, eOpts) { 
        Ext.getCmp('SliderField').getComponent().setAllowThumbsOverlapping(true); 
    }, 
  
    onOverlappingCkeckBoxUncheck: function(checkboxfield, e, eOpts) { 
        Ext.getCmp('SliderField').getComponent().setAllowThumbsOverlapping(false); 
    }, 
  
    onSliderFieldChange: function(me, sl, thumb, newValue, oldValue, eOpts) { 
        var slider= Ext.getCmp('SliderField'); 
        Ext.getCmp('SliderValueToolbar').setTitle('values = [' + slider.getValues() + ']'); 
    } 
});